<script setup>
import {ref} from 'vue'

const props = defineProps({
  images: {
    type: Array,
    required: true
  }
})
const totalItems = props.images.length
const categories = []
const brands = []
const colors = []
const seasons = []

const emit = defineEmits(["usingFilter"])
for (const idx in props.images) {
  let img = props.images[idx]
  categories.push(img.clothInfo.cloth_type.length > 0 ? img.clothInfo.cloth_type : "未知")
  brands.push(img.clothInfo.cloth_brand.length > 0 ? img.clothInfo.cloth_brand : "未知")
  colors.push(img.clothInfo.cloth_color.length > 0 ? img.clothInfo.cloth_color : "未知")
  seasons.push(img.clothInfo.cloth_season.length > 0 ? img.clothInfo.cloth_season : "未知")
}
const selectedCategory = ref(null)
const selectedColors = ref([])
const selectedBrands = ref([])
const selectedSeasons = ref([])
const clickFilter = (res) => {
  emit("usingFilter", res)
}
const toggleCategory = (categoryId) => {
  selectedCategory.value = selectedCategory.value === categoryId ? null : categoryId;
  clickFilter([
    {k: "category", v: selectedCategory.value},
    {k: "color", v: selectedColors.value},
    {k: "brand", v: selectedBrands.value},
    {k: "season", v: selectedSeasons.value}])
};
const toggleColor = (colorName) => {
  const index = selectedColors.value.indexOf(colorName);
  if (index > -1) {
    selectedColors.value.splice(index, 1);
  } else {
    selectedColors.value.push(colorName);
  }
  clickFilter([
    {k: "category", v: selectedCategory.value},
    {k: "color", v: selectedColors.value},
    {k: "brand", v: selectedBrands.value},
    {k: "season", v: selectedSeasons.value}])
};
const toggleBrand = (brandName) => {
  const index = selectedBrands.value.indexOf(brandName);
  if (index > -1) {
    selectedBrands.value.splice(index, 1);
  } else {
    selectedBrands.value.push(brandName);
  }
  clickFilter([
    {k: "category", v: selectedCategory.value},
    {k: "color", v: selectedColors.value},
    {k: "brand", v: selectedBrands.value},
    {k: "season", v: selectedSeasons.value}])
};
const toggleSeason = (seasonName) => {
  const index = selectedSeasons.value.indexOf(seasonName);
  if (index > -1) {
    selectedSeasons.value.splice(index, 1);
  } else {
    selectedSeasons.value.push(seasonName);
  }
  clickFilter([
    {k: "category", v: selectedCategory.value},
    {k: "color", v: selectedColors.value},
    {k: "brand", v: selectedBrands.value},
    {k: "season", v: selectedSeasons.value}])
};
</script>

<template>
  <aside class="sidebar">
    <div class="stats-panel">
      <h3><i class="fas fa-chart-pie"></i> 衣橱统计</h3>
      <div class="stats-grid">
        <div class="stat-item">
          <div class="stat-value">{{ totalItems }}</div>
          <div class="stat-label">总衣物</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ categories.length }}</div>
          <div class="stat-label">分类</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ brands.length }}</div>
          <div class="stat-label">品牌</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ colors.length }}</div>
          <div class="stat-label">颜色</div>
        </div>
      </div>
    </div>

    <div class="filter-panel">
      <div class="filter-section">
        <h4><i class="fas fa-filter"></i> 分类</h4>
        <div class="filter-options">
          <div
              v-for="category in Array.from(new Set(categories))"
              :key="category"
              class="filter-option"
              :class="{ active: selectedCategory === category }"
              @click="toggleCategory(category)"
          >
            {{ category }}
          </div>
        </div>
      </div>

      <div class="filter-section">
        <h4><i class="fas fa-palette"></i> 颜色</h4>
        <div class="filter-options">
          <div
              v-for="color in Array.from(new Set(colors))"
              :key="color"
              class="filter-option"
              :class="{ active: selectedColors.includes(color) }"
              @click="toggleColor(color)"
          >
            {{ color }}
          </div>
        </div>
      </div>

      <div class="filter-section">
        <h4><i class="fas fa-cloud-sun"></i> 季节</h4>
        <div class="filter-options">
          <div
              v-for="season in Array.from(new Set(seasons))"
              :key="season"
              class="filter-option"
              :class="{ active: selectedSeasons.includes(season) }"
              @click="toggleSeason(season)"
          >
            {{ season }}
          </div>
        </div>
      </div>

      <div class="filter-section">
        <h4><i class="fas fa-tag"></i> 品牌</h4>
        <div class="filter-options">
          <div
              v-for="brand in Array.from(new Set(brands))"
              :key="brand"
              class="filter-option"
              :class="{ active: selectedBrands.includes(brand) }"
              @click="toggleBrand(brand)"
          >
            {{ brand }}
          </div>
        </div>
      </div>
    </div>
  </aside>
</template>

<style scoped>

</style>